import React, { useState } from 'react'
import { Row, Col, Radio, InputNumber, Slider, Button, Checkbox, Input, Space, Popover, Dropdown, Tag, Tooltip, Switch, Divider } from 'antd'
import { backgroundObj } from '@/utils/utils'
import EditLink from '@/components/EditLink';
import UploadImage from '@/components/UploadImage';
import SelectRadioModel from '@/components/SelectRadioModel'
import UploadSelectImage from '../../../UploadSelectImage';
import { CloseOutlined } from '@ant-design/icons'
import SortList from '@/components/SortList';
import { SketchPicker } from 'react-color';
import SelectLink from '@/components/SelectLink';
import './index.less'
const DisplayAdvertising = (props) => {
    const { selectData, data, edit } = props
    const { selectIndex } = data
    const { list,
        marginType,
        top,
        bottom,
        backgroundType,
        backgroundColor,
        countType,
        pictureTitleShow,
        paddingLeft,
        paddingTop,
        radiusType,
        borderRadius,
        titleShow,
        title,
        moreShow,
        linkType,
        cycleFlag,
        VideoTitleFlag,
        backgroundImage
    } = selectData
    const [visible, setVisible] = useState(false)
    const [editVisible, setEditVisible] = useState(false)
    const [shopEdit, setShopEdit] = useState(false)
    const [checkVisible, setCheckVisible] = useState(false)
    const [bgVisible, setBgVisible] = useState(false)
    const swiperListProps = {
        title: "",
        src: "",
        linkType: "",
        linkData: {},
        linkSrc: '',
        showIphone: false
    }
    console.log(selectData, '123123')
    const renderTag = (item) => {
        const { linkType, linkSrc, linkData } = item
        if (linkType === 'customize') {
            return '链接|' + linkSrc
        } else {
            const { goodsName } = linkData
            return '商品|' + goodsName
        }
    }
    const items = (index, item) => {
        return [
            {
                label: (
                    <Button onClick={() => {
                        setShopEdit({
                            show: true,
                            details: [],
                            index: index,
                            onChange: (e) => {
                                handleUpdate({
                                    linkType: 'customize',
                                    ...e
                                })
                            }
                        })
                    }} type='link'>商品</Button>
                ),
                key: '0',
            },
            {
                label: (
                    <Button onClick={() => {
                        setEditVisible({
                            show: true,
                            detail: item,
                            index: index,
                        })
                    }} type='link'>自定义链接</Button>
                ),
                key: '1',
            },
        ]
    };
    const handleUpdate = (o) => {
        edit({
            list: data.list.map((val, index) => {
                if (index === selectIndex) {
                    return {
                        ...val,
                        ...o
                    }
                }
                return val
            })
        })
    }
    const renderType = {
        swiper: "轮播图",
        two: "一行两个",
        scroll: '横向滑动'
    }[countType]
    return <Row gutter={[12, 12]}>
        <Col
            span={24}>
            视频
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            组件模版  <span style={{ color: '#333333' }}> {renderType}</span>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    countType: e.target.value
                })
            }} value={countType}>
                <Radio.Button value={'swiper'}>轮播图</Radio.Button>
                <Radio.Button value={'two'}>两张</Radio.Button>
                <Radio.Button value={'scroll'}>横向滑动</Radio.Button>
            </Radio.Group>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>标题栏</div>
                <div style={{ color: '#333333' }}>{titleShow ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        titleShow: e
                    })
                }} checked={titleShow}></Switch></div>
            </Space>
        </Col>
        {titleShow && <>
            <Col span={24}>
                <Space>
                    <div>标题：</div>
                    <Input
                        showCount
                        maxLength={20}
                        onChange={(e) => {
                            handleUpdate({ title: e.target.value })
                        }} value={title}></Input>
                </Space>
            </Col>
            <Col className='editor-content-item-label'
                span={24}>
                <Space>
                    <div>查看更多</div>
                    <div style={{ color: '#333333' }}>{moreShow ? '显示' : '隐藏'}</div>
                    <div><Switch onChange={(e) => {
                        handleUpdate({
                            moreShow: e
                        })
                    }} checked={moreShow}></Switch></div>
                </Space>
            </Col>
            {moreShow && <Col className='editor-content-item-label'
                span={24}>
                <div>
                    <Space>
                        <div>
                            跳转链接:
                        </div>
                        <SelectLink handleUpdate={(e) => {
                            handleUpdate({
                                ...e
                            })
                        }} data={selectData}></SelectLink>

                    </Space>

                </div>
            </Col>}
        </>}
        <Divider></Divider>
        <Col
            span={24}>
            播放设置
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>循环播放</div>
                <div style={{ color: '#333333' }}>{cycleFlag ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        cycleFlag: e
                    })
                }} checked={cycleFlag}></Switch></div>
            </Space>
        </Col>
        <Divider></Divider>
        <Col
            span={24}>
            内容展示
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            <Space>
                <div>视频标题</div>
                <div style={{ color: '#333333' }}>{VideoTitleFlag ? '显示' : '隐藏'}</div>
                <div><Switch onChange={(e) => {
                    handleUpdate({
                        VideoTitleFlag: e
                    })
                }} checked={VideoTitleFlag}></Switch></div>
            </Space>
        </Col>
        <Divider></Divider>
        <Col
            span={24}>
            内容
        </Col>
        <Col className='editor-swiper-setting'
            span={24}>
            <SortList onSort={(e) => {
                handleUpdate({
                    list: e
                })
            }} childrenData={list} list={list} renderProps={(val, index) => {
                const {
                    cover,
                    title,
                } = val
                return <div key={index} className='Video-item'>
                    <div onClick={() => {
                        setVisible({
                            show: true,
                            index: index,
                            type: "edit"
                        })
                    }} className='video-item__image'>
                        <img src={cover} style={{ width: '100%', height: "100%" }} />
                    </div>
                    <Space style={{ width: "100%" }} direction='vertical'>
                        <div>
                            <div><Input
                                onChange={(e) => {
                                    handleUpdate({
                                        list: list.map((item, o) => {
                                            if (index === o) {
                                                return {
                                                    ...item,
                                                    title: e.target.value
                                                }
                                            }
                                            else {
                                                return item
                                            }
                                        })
                                    })
                                }}
                                value={title}></Input></div>
                        </div>
                        <div>
                        </div>
                        <CloseOutlined onClick={(e) => {
                            e.preventDefault();
                            handleUpdate({
                                list: list.filter((item, o) => {
                                    return o !== index
                                })
                            })
                        }} className='close_icon'></CloseOutlined>
                    </Space>
                </div>
            }}></SortList>

            <div onClick={() => {
                setCheckVisible({
                    show: true
                })
            }} className='imageAd-add-btn'>
                <Button type='link'>+添加视频</Button>
            </div>
            {/* <div className='upload-text'>建议尺寸750x280像素，图片大小不超过2M</div>
            <div className='upload-text'>最多添加12个轮播图，拖动选中的轮播图可对其排序</div> */}
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            边角样式:
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    radiusType: e.target.value
                })
            }} value={radiusType}>
                <Radio value={'rightAngle'}>直角</Radio>
                <Radio value={'roundedCorners'}>圆角</Radio>
            </Radio.Group>
        </Col>
        {radiusType === 'roundedCorners' && <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>圆角半径</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={16}
                        onChange={(e) => handleUpdate({ borderRadius: e })}
                        value={borderRadius}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={16} onChange={(e) => {
                        handleUpdate({ borderRadius: e })
                    }} value={borderRadius}></InputNumber></Col>
            </Row>
        </Col>}
        <Col className='editor-content-item-label'
            span={24}>
            组件样式
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>左右内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingLeft: e })}
                        value={paddingLeft}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingLeft: e })
                    }} value={paddingLeft}></InputNumber></Col>
            </Row>
        </Col>
        <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上下内边距</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ paddingTop: e })}
                        value={paddingTop}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ paddingTop: e })
                    }} value={paddingTop}></InputNumber></Col>
            </Row>
        </Col>
        <Col className='editor-content-item-label'
            span={24}>
            外边距：
            <Radio.Group onChange={(e) => {
                handleUpdate({
                    top: 12,
                    bottom: 0,
                    marginType: e.target.value
                })
            }} value={marginType}>
                <Radio value={'detault'}>默认</Radio>
                <Radio value={'customize'}>自定义</Radio>
            </Radio.Group>
        </Col>
        {marginType === 'customize' && <Col
            span={24}>
            <Row gutter={[12, 12]}>
                <Col span={6}>上</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ top: e })}
                        value={top}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ top: e })
                    }} value={top}></InputNumber></Col>
            </Row>
            <Row gutter={[12, 12]}>
                <Col span={6}>下</Col>
                <Col span={12}>
                    <Slider
                        min={0}
                        max={32}
                        onChange={(e) => handleUpdate({ bottom: e })}
                        value={bottom}
                    />
                </Col>
                <Col span={6}><InputNumber min={0}
                    max={32} onChange={(e) => {
                        handleUpdate({ bottom: e })
                    }} value={bottom}></InputNumber></Col>
            </Row>
        </Col>}
        <Col className='editor-content-item-label'
            span={24}>
            组件背景
        </Col>
        <Col span={24}>
            <Radio.Group onChange={(e) => {
                handleUpdate({ backgroundType: e.target.value, backgroundColor:"#ffffff",backgroundImage: '' })
            }} value={backgroundType}>
                <Radio value={'default'}>默认</Radio>
                <Radio value={'color'}>颜色</Radio>
                <Radio value={'image'}>图片</Radio>
            </Radio.Group>
        </Col>
        {backgroundType === 'color' ? <Col span={24}>
            <div className='editor-set-color'>
                <div className='design-editor-content-item-label'>
                    自定义颜色
                </div>
                <div className='design-editor-link'>
                    <Space>
                        {/* <SketchPicker color={backgroundColor}
                            onChangeComplete={(e) => {
                                edit({
                                    backgroundColor: e
                                })

                            }}></SketchPicker> */}
                        <Button type='link'>重置</Button>
                        <Popover content={<SketchPicker
                            color={backgroundColor}
                            onChange={(e) => {
                                handleUpdate({
                                    backgroundColor: e.hex
                                })

                            }}></SketchPicker>} trigger={['click']} placement={'bottom'}>
                            <div className='design-color-set'>
                                <div style={{ background: backgroundColor }} className='design-color-block '></div>
                            </div>
                        </Popover>

                    </Space>
                </div>
            </div>
        </Col> : backgroundType === 'image' ? <Col span={24}>
            <div className='editor-set-color' onClick={(e) => {
                setBgVisible({
                    show: true,
                })
            }}>
                {backgroundImage ? <div style={backgroundObj(backgroundImage)} className='editor-set-uploadBlock'>
                </div> : <div className='editor-set-uploadBlock'>
                    <div className='editor-set-upload'>
                        <i className='icon-jia'></i>
                    </div>
                </div>}
            </div>
        </Col> : ""}
        <UploadImage contentType={'video'} handleImage={(e) => {
            console.log(e, '123123123')
            if (e) {
                const { materialName, cover } = e
                const { url } = JSON.parse(cover)
                handleUpdate({
                    list: [...list, {
                        ...e,
                        cover: url,
                        title: materialName
                    }]
                })
            }
        }} visible={checkVisible} onClose={() => { setCheckVisible(false) }}></UploadImage>
        <UploadImage contentType={'video'} handleImage={(e) => {
            if (e) {
                const { type, index } = visible
                const { materialName, cover, content } = e
                const { url } = JSON.parse(cover)
                const src = JSON.parse(content).src
                if (type === 'edit') {
                    handleUpdate({
                        list: list.map((item, o) => {
                            const { materialName } = e
                            if (index === o) {
                                return {
                                    ...e,
                                    src,
                                    cover: url,
                                    title: materialName
                                }
                            }
                            else {
                                return item
                            }
                        })
                    })
                } else {
                    handleUpdate({
                        list: [...list, {
                            ...swiperListProps,
                            cover: url,
                            src
                        }]
                    })
                }

            }
        }} visible={visible} onClose={() => { setVisible(false) }}></UploadImage>
        <EditLink handleCallback={(e) => {
            handleUpdate({
                linkType: 'customize',
                ...e
            })
        }} visible={editVisible} onClose={() => { setEditVisible(false) }}></EditLink>
        <SelectRadioModel onOk={(e) => {
            if (e[0]) {
                handleUpdate({
                    linkType: 'shop',
                    linkData: e[0]
                })
            }
        }} visible={shopEdit} onClose={() => setShopEdit(false)}></SelectRadioModel>
        <UploadImage handleImage={(e) => {
            if (e) {
                const { src } = e

                handleUpdate({
                    backgroundImage: src
                })
            }
        }} visible={bgVisible} onClose={() => { setBgVisible(false) }}></UploadImage>
    </Row>
}
export default DisplayAdvertising
